/**
 * Created by li-rz on 2016.12.20
 */

import './Accordion.scss';
import React from 'react';
import Mixin from './Mixin.jsx'

class Accordion extends React.Component {
    constructor(props, context, updater) {
        super(props, context, updater);
        this.state = {
            activeKey: this.props.activeKey
        };


    }

    setAccordionActive(active, key) {
        if (Array.isArray(this.state.activeKey)) {
            for(let i = 0; i < this.state.activeKey.length; ++i) {
                if(key == this.state.activeKey[i]) {
                    return true;
                }
            }
            return active;
        }
        return this.state.activeKey === key ? true : active;
    }

    render() {
        let self = this;
        return (<div className={Mixin.getClassSet('accordion')}>
            {
                self.props.data.map(function (item, key) {
                    return React.createElement(
                        Item, {
                            title: item.title,
                            expanded: self.setAccordionActive(item.active, key),
                            key: key,
                            theme: self.props.theme
                        },
                        item.content)
                })
            }
        </div>)
    }
}

Accordion.propTypes = {
    data: React.PropTypes.array,
    activeKey: React.PropTypes.number || React.PropTypes.array,
    config: React.PropTypes.object,
    theme: React.PropTypes.number
};

Accordion.defaultProps = {
    data: {},
    activeKey: 0,
    theme: 1
};
Accordion.displayName = 'Accordion';

class Item extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            expanded: this.props.expanded,
            collapsing: false
        };
        // console.log(this.state.expanded);
    }



    handleToggle(event){
        this.setState({
            expanded: !this.state.expanded,
            collapsing: !this.state.collapsing
        });
    }

    render() {
        let self = this;

        return React.createElement(
            'dl',
            {
                className: Mixin.getClassSet('accordion-item') +
                Mixin.ifFunction(self.state.expanded, Mixin.getClassSet('active'), '')
            },
            React.createElement('dt', {
                onClick: self.handleToggle.bind(self),
                className: Mixin.reduceClassSet('accordion-title', 'accordion-block-' + this.props.theme)
            },
                    React.createElement('svg', {
                    width: '28px', height: '28px',
                    style: {float: 'left',
                        position: 'absolute',
                        left: '6.5px'}
                },
                    React.createElement('circle', {
                    // className: 'fa ' + Mixin.ifFunction(self.state.expanded, 'fa-circle', 'fa-circle-o')
                        r: '7',
                        cx: '50%',
                        cy: '50%',
                        stroke: '#c4cbce',
                        fill: 'white',
                        strokeWidth: '3'

                    })
                    ),
                React.createElement('i', {
                    className: 'fa ' + (self.state.expanded ? 'fa-sort-asc':'fa-sort-desc'),
                    style: {
                        position: 'absolute',
                        right: '1.5rem',
                        display: 'inline-block',
                        width: 'auto',
                        height: 'auto'
                    }
                }),
                React.createElement('span', {}, this.props.title)),
            React.createElement('dd', {
                className:
                    Mixin.reduceClassSet('accordion-collapse', 'accordion-block-' + this.props.theme)
            },
                React.createElement('div', {
                    className: Mixin.getClassSet('accordion-content')
                }, this.props.children)
            )
        )
    }
}
Item.PropTypes = {
    expanded: React.PropTypes.bool
};

Item.displayName = 'Accordion Item';

export default Accordion;
